<template>
  <ComDialog v-model="dialogVisible">
    <ElementEasyForm ref="comFromRef" :formJson="formJson">


    </ElementEasyForm>
    <template #footer>
	<div >
			<el-button size="large" @click="handleClose">取消</el-button>
			<el-button size="large" :loading="subLoading" type="primary" @click="submitData">保存</el-button>
		</div>
    </template>
    	
  </ComDialog>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, watch } from "vue";
import {
  ElementEasyForm
} from "element-easy-form";

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const emit = defineEmits(["update:modelValue"]);
const dialogVisible = ref(false);
const subLoading = ref(false);
const comFromRef = ref<any>();
const submitData =async ()=>{
try {
	const res = await comFromRef.value.validate();
	console.log('res :>> ', res);
} catch (error) {
	console.log('error :>> ', error);
}
}
const state = reactive({});
const formJson = ref<any>({
  schema: [
    {
      label: "名字",
      prop: "name",
      span:12,
      componentName: "ElInput",
      attrs: {
        placeholder: "请输入名字",
      },
      rules: [{ required: true, message: "名字不能为空", trigger: 'change', }],
    },
      {
      label: "时间",
      prop: "date",
      span:12,
      componentName: "ElDatePicker",
      attrs: {
        placeholder: "请选择时间",
      },
      rules: [{ required: true, message: "时间不能为空", trigger: 'change', }],
    },
       {
      label: "类型",
      prop: "type",
        span:12,
      componentName: "ElSelect",
      attrs: {
        placeholder: "请选择类型",
      },
      rules: [{ required: true, message: "类型不能为空", trigger: 'change', }],
      children:{
        componentName:"ElOption",
        props:{
          value:'id',
          label:'name'
        },
        options:[
          {value:1,label:'类型1'},
          {value:2,label:'类型2'},
          {value:3,label:'类型3'},
        ]
      }
    },
  ],

  model: {
    name: "",
  },
});
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    defalut: false,
  },
});
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  },
  {
    immediate: true,
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
</script>

<style scoped lang="scss"></style>
